<template>
  <div>
    <!--连接-->
    <el-row>
      <el-col :span="16">
        <div class="link_1">
          <el-link type="primary" href="#/" :underline="false" class="l_link">贾豆</el-link>
          <el-link type="warning" href="#/reading" :underline="false" class="l_link">读书</el-link>
          <el-link type="success" href="#/music" :underline="false" class="l_link">音乐</el-link>
          <el-link type="danger" href="#/movie" :underline="false" class="l_link">电影</el-link>
          <el-link type="primary" href="#/beanindex" :underline="false" class="l_link">豆品</el-link>
          <el-link type="warning" :underline="false" class="l_link">同城</el-link>
          <el-link type="success" :underline="false" class="l_link">小组</el-link>
          <el-link type="danger" :underline="false" class="l_link">阅读</el-link>
          <el-link type="info" href="#/" :underline="false" class="l_link">关于我们</el-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="link_1">
          <el-link type="primary" href="#/read" :underline="false" class="l_link" style="margin-left: 80px">下载客户端
          </el-link>
          <el-link type="primary" href="#/register" :underline="false" class="l_link">登录/注册</el-link>
        </div>
      </el-col>
    </el-row>

    <!--搜索-->
    <el-row>
      <el-col :span="24">
        <div class="header_1">
          <el-row>
            <el-col :span="24">
              <div class="header_2">
                <el-row>
                  <el-col :span="4" :offset="2">
                    <div class="header_2">
                      贾豆电影
                    </div>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <div class="search">
                      <el-input type="text" v-model="input" placeholder="请输入要搜索的内容" style="width: 70%;float: left"/>
                      <el-button icon="el-icon-search" @click="search(input)"
                                 style="float: left;margin-top: 26px;margin-left: 30px" circle>
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
                <!--电影连接-->
                <el-row>
                  <el-col :span="22" :offset="2">
                    <div class="movie_link">
                      <el-link href="#/" :underline="false" class="m_link">影讯&购票</el-link>
                      <el-link href="#/" :underline="false" class="m_link">选电影</el-link>
                      <el-link href="#/" :underline="false" class="m_link">电视剧</el-link>
                      <el-link :underline="false" class="m_link">排行榜</el-link>
                      <el-link :underline="false" class="m_link">分类</el-link>
                      <el-link :underline="false" class="m_link">影评</el-link>
                      <el-link :underline="false" class="m_link">2019年度榜单</el-link>
                      <el-link :underline="false" class="m_link">2019书影音报告</el-link>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!--main-->
    <el-row style="margin-bottom: 20px">
      <el-col :span="24">
        <div class="main_1">
          <!--热门链接-->
          <el-row>
            <el-col :span="24">
              <div class="main_2">
                <el-col :span="3" :offset="2">
                  <div class="main_3">
                    最近热门电影
                  </div>
                </el-col>
                <el-col :span="9">
                  <div class="main_4">
                    <el-link href="#/" :underline="false" class="n_link">热门</el-link>
                    <el-link href="#/" :underline="false" class="n_link">最新</el-link>
                    <el-link href="#/" :underline="false" class="n_link">贾豆高分</el-link>
                    <el-link href="#/" :underline="false" class="n_link">冷门佳片</el-link>
                    <el-link href="#/" :underline="false" class="n_link">华语</el-link>
                    <el-link href="#/" :underline="false" class="n_link">欧美</el-link>
                    <el-link href="#/" :underline="false" class="n_link">韩国</el-link>
                    <el-link href="#/" :underline="false" class="n_link">日本</el-link>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="main_5">
                    <el-link :underline="false" class="j_link el-icon-d-arrow-right">更多</el-link>
                  </div>
                  <div>
                  </div>
                </el-col>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="product">
                <el-col :span="13" :offset="2">
                  <div class="product_1">
                    <el-row class="content" :gutter="45">
                      <!--数据展示-->
                      <el-col :span="6" v-for="movie in pb.movies">
                        <div class="content1">
                          <el-link href="javascript:void(0)" :underline="false" style="color: #37a">
                            <el-image style="height:150px" :src="movie.mpic" v-on:click="goProduct(movie.mid)"/>
                          </el-link>
                        </div>
                        <div class="content2">
                          <el-link :underline="false" @click="goProduct(movie.mid)" style="color: #37a">{{movie.mname}}&nbsp;<span
                            style="color: #e09015">{{movie.mscore}}</span></el-link>
                        </div>
                      </el-col>
                    </el-row>
                    <!--分页操作-->
                    <el-row>
                      <el-col :span="24" class="page">
                        <div class="block">
                          <el-pagination
                            layout="prev, pager, next"
                            :page-size="pb.pageSize"
                            :current-page="pb.currentPage"
                            :total="pb.totalCount"
                            @current-change="next"
                          >
                          </el-pagination>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="9">
                  <div class="product_2">
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div style="float: left">
                            评分口碑榜&nbsp;&nbsp;
                          </div>
                          <div style="float: left">
                            <el-link :underline="false" class="koubeilink el-icon-d-arrow-right">更多榜单</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22" v-for="(movie,index) in movies">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" @click="goProduct(movie.mid)" class="koubeilink">{{index+1}}&nbsp;&nbsp;{{movie.mname}}
                            </el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="main_1">
          <!--热门链接-->
          <el-row>
            <el-col :span="24">
              <div class="main_2">
                <el-col :span="3" :offset="2">
                  <div class="main_3">
                    热门电视剧
                  </div>
                </el-col>
                <el-col :span="9">
                  <div class="main_4">
                    <el-link href="#/" :underline="false" class="n_link">热门</el-link>
                    <el-link href="#/" :underline="false" class="n_link">国产剧</el-link>
                    <el-link href="#/" :underline="false" class="n_link">综艺</el-link>
                    <el-link href="#/" :underline="false" class="n_link">美剧</el-link>
                    <el-link href="#/" :underline="false" class="n_link">日剧</el-link>
                    <el-link href="#/" :underline="false" class="n_link">韩剧</el-link>
                    <el-link href="#/" :underline="false" class="n_link">日本动漫</el-link>
                    <el-link href="#/" :underline="false" class="n_link">纪录片</el-link>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="main_5">
                    <el-link :underline="false" class="j_link el-icon-d-arrow-right">更多</el-link>
                  </div>
                </el-col>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="product">
                <el-col :span="13" :offset="2">
                  <div class="product_1">
                    <el-row class="content" :gutter="45">
                      <el-col :span="6">
                        <div class="content1">
                          <el-image style="height:150px" :src="uri"/>
                        </div>
                        <div class="content2">
                          <el-link href="#/" :underline="false" style="color: #37a">传闻中的陈芊芊&nbsp;<span
                            style="color: #e09015">8.0</span></el-link>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="content1">
                          <el-image style="height:150px" :src="uri"/>
                        </div>
                        <div class="content2">
                          <el-link href="#/" :underline="false" style="color: #37a">传闻中的陈芊芊&nbsp;<span
                            style="color: #e09015">8.0</span></el-link>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="content1">
                          <el-image style="height:150px" :src="uri"/>
                        </div>
                        <div class="content2">
                          <el-link href="#/" :underline="false" style="color: #37a">传闻中的陈芊芊&nbsp;<span
                            style="color: #e09015">8.0</span></el-link>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="content1">
                          <el-image style="height:150px" :src="uri"/>
                        </div>
                        <div class="content2">
                          <el-link href="#/" :underline="false" style="color: #37a">传闻中的陈芊芊&nbsp;<span
                            style="color: #e09015">8.0</span></el-link>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row class="content" :gutter="45">
                      <el-col :span="6">
                        <div class="content1">
                          <el-image style="height:150px" :src="uri"/>
                        </div>
                        <div class="content2">
                          <el-link href="#/" :underline="false" style="color: #37a">传闻中的陈芊芊&nbsp;<span
                            style="color: #e09015">8.0</span></el-link>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="content1">
                          <el-image style="height:150px" :src="uri"/>
                        </div>
                        <div class="content2">
                          <el-link href="#/" :underline="false" style="color: #37a">传闻中的陈芊芊&nbsp;<span
                            style="color: #e09015">8.0</span></el-link>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="content1">
                          <el-image style="height:150px" :src="uri"/>
                        </div>
                        <div class="content2">
                          <el-link href="#/" :underline="false" style="color: #37a">传闻中的陈芊芊&nbsp;<span
                            style="color: #e09015">8.0</span></el-link>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="content1">
                          <el-image style="height:150px" :src="uri"/>
                        </div>
                        <div class="content2">
                          <el-link href="#/" :underline="false" style="color: #37a">传闻中的陈芊芊&nbsp;<span
                            style="color: #e09015">8.0</span></el-link>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" class="page">
                        <div class="block">
                          <el-pagination
                            layout="prev, pager, next"
                            :total="50">
                          </el-pagination>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="9">
                  <div class="product_2">
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div style="float: left">
                            热门豆列
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">有些剧让我觉得比有些电影牛逼</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row style="margin-bottom: 80px">
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">冷门佳片推荐</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div style="float: left">
                            合作联系
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div>
                          <p style="font-size: 14px">&nbsp;&nbsp;&nbsp;电影合作邮箱：movie@jiadou.com</p>
                          <p style="font-size: 14px">电视剧合作邮箱：tv@jiadou.com</p>
                          <p style="font-size: 14px">PRO合作邮箱：pro@jiadou.com</p>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!--footer-->
    <el-row>
      <el-col :span="24">
        <div class="footer">
          © 2020－2020 jiadou.com, all rights reserved
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  import axios from "axios";

  export default {
    name: "movie",
    data() {
      return {
        pb: {
          currentPage: 1, //当前页
          totalPage: 0, // 总页
          totalCount: 0, // 总条数
          pageSize: 0, // 每页显示条数
          movies: []
        },
        movies: [],
        uri: "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2603439726.jpg",
        input: '',
        user: {
          name: ''
        }
      }
    },
    methods: {
      next: function (page) {
        this.pb.currentPage = page;
        var _this = this;
        axios.get("/bean/movie/findAll", {params: {currentPage: _this.pb.currentPage, pageSize: "8"}})
          .then(function (response) {
            _this.pb = response.data;
          })
          .catch(function (error) {
            alert(error.data);
          })
      },
      goProduct: function (mid) {
        this.$router.push("/product/" + mid);
      },
      search: function (keyword) {
        this.$router.push("/search/" + keyword);
      }
    },
    mounted: function () {
      let user = this.$route.query.user;
      this.user = user;
      var _this = this;

      axios.get("/bean/movie/findAll", {params: {currentPage: _this.pb.currentPage, pageSize: "8"}})
        .then(function (response) {
          _this.pb = response.data;
        })
        .catch(function (error) {
          console.log(error);
        })

      axios.get("/bean/movie/findScore", {params: {currentPage: "1", pageSize: "8"}})
        .then(function (response) {
          _this.movies = response.data;
        })
        .catch(function (error) {
          console.log(error);
        })

    }
  }
</script>

<style scoped>
  .link_1 {
    height: 30px;
    background-color: #545652;
  }

  .l_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: whitesmoke;
  }

  .m_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: blue;
  }

  .n_link {
    line-height: 40px;
    font-size: 14px;
    margin: 0 10px;
    float: left;
    color: darkgray;
  }

  .header_1 {
    height: 140px;
    background-color: azure;
    margin-bottom: 15px;
  }

  .header_2 {
    height: 90px;
    font-weight: bold;
    font-size: 36px;
    color: skyblue;
    line-height: 90px;
  }

  .movie_link {
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }

  .main_1 {
    height: 500px;
  }

  .main_2 {
    height: 40px;
  }

  .main_3 {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    width: 100%;
  }

  .main_4 {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    width: 100%;
  }

  .main_5 {
    height: 40px;
    line-height: 40px;
    float: left;
    font-size: 14px;
    width: 100%;
    color: blue;
  }

  .j_link {
    height: 40px;
    line-height: 40px;
    color: #37a;
    float: left;
    font-size: 14px;
  }

  .product_1 {
    height: 450px;
    margin-left: 30px;
  }

  .product_2 {
    height: 450px;
  }

  .content1 {
    width: 100%;
    height: 150px;
  }

  .content2 {
    padding: 8px;
  }

  .content {
    padding: 20px 0px 10px 0px;
  }

  .page {
    height: 40px;
  }

  .footer {
    height: 60px;
    line-height: 60px;
    background-color: #545652;
    color: whitesmoke;
    font-size: 14px;
  }

  .koubei {
    height: 50px;
    font-weight: bold;
    line-height: 50px;
    margin-left: 80px;
    border-bottom: 1px solid silver;
  }

  .koubeilink {
    line-height: 50px;
    color: #37a;
  }

  .cli {
    float: left;
    font-size: 14px;
    margin-left: 30px;
    color: #37a;
  }
</style>
